<template>
  <div>
    <el-dialog
      class="fnance__modal"
      :title="title || '详情'"
      :visible.sync="dialogVisible"
      width="850px"
    >
      <template v-if="currentData.type === 'INCENTIVE'">
        <OrderTable :currentData="currentData" />
      </template>
      <template
        v-if="
          currentData.type === 'MONTHLY' || currentData.type === 'WITHDRAWAL'
        "
      >
      </template>
      <template v-else>
        <FnanceMainModalTable v-if="!detailIsOrder" :detail="detail" />
        <OrderInfo :detail="detail" v-else />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleViible">取 消</el-button>
        <el-button type="primary" @click="toggleViible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, PropSync } from "vue-property-decorator";
import FnanceMainModalTable from "./FnanceMainModalTable.vue";
import OrderTable from "./OrderTable.vue";
import OrderInfo from "@/views/order/components/detail/Info.vue";

@Component({
  components: {
    FnanceMainModalTable,
    OrderInfo,
    OrderTable,
  },
})
export default class FnanceMainModal extends Vue {
  @PropSync("visible", { type: Boolean, default: false })
  dialogVisible: boolean;

  /** 外围选择的行，激励计划用 */
  @Prop({
    default() {
      return {};
    },
  })
  currentData: any;

  @Prop({
    default() {
      return {};
    },
  })
  detail;

  @Prop()
  detailIsOrder;

  @Prop()
  title: string;

  toggleViible() {
    this.dialogVisible = !this.dialogVisible;
  }
}
</script>

<style lang="scss" scoped></style>
